@extends('layouts.empty')

@section('css')
<style>
  .default-box {
    display:flex;
    box-sizing:border-box;
    }
  .side-bar {
    width:200px;
    
  }
  .side-bar__item {
    display: block;
    padding:15px 30px;
    border: 1px solid #eee;
  }
  .content {
    width: calc(100vw - 300px);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .good {
    padding:15px;
    border: 1px solid #eee;
    width:150px;
    margin:15px;
    text-align: center;
  }
  .active {
    color: #fff;
    background: rgb(62,142,185);
  }
  .print {
    display: none;
  }
  .print
{
    width: 48mm;
    height: 40mm;
}

  @media print {
    .print {
      display: block;
    }
    .good-tag {
  position: relative;
  box-sizing: border-box;
  width: 40mm;
  height: 50mm;
}
.good-tag-body {
  position: absolute;
  top: 2mm;
  left: 6mm;
  width: 28mm;
  height: 28mm;
}
.good-tag-footer {
  position: absolute;
  bottom: 2mm;
  left: 3mm;
  width: 34mm;
  height: 16mm;
}
.good-tag-footer__name,
.good-tag-footer__spec {
  font-size: 4mm;
  line-height: 8mm;
  overflow: hidden;
  height: 8mm;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

    .default-box
{
    display: flex;
    justify-content: space-around;

    box-sizing: border-box;
}

.default-box_column
{
    flex-direction: column;
}

.default-box_center
{
    align-items: center;
}

.print__logo
{
    width: 50mm;
    height: 8mm;
    margin: 0 auto;
}

.print__good-info
{
    font-size: 3mm;

    flex: 1;

    height: 18mm;
    margin-right: 2mm;
}

.print__name
{
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.print__name::before
{
    content: '品名：';
}

.print__spec
{
    line-height: 5mm;

    overflow: hidden;

    max-height: 10mm;
}

.print__spec::before
{
    content: '规格：';
}

.print__price::before
{
    content: '价格：';
}

.print__price::after
{
    content: '元'；;
}

.print__good-code
{
    width: 20mm;
    height: 20mm;
}

.print__static
{
    font-size: 3mm;
}
.not-print {
      display:none;
    }
  }
</style>
@endsection

@section('content')
<div class="print good-tag">
    <div class="good-tag-body">
      <div class="good-tag-body__qrcode"></div>
    </div>
    <div class="good-tag-footer">
      <div class="good-tag-footer__name"></div>
      <div class="good-tag-footer__spec"></div>
    </div>
  </div>

<!-- <div class="print default-box default-box_column">
<img class="default-box__item print__logo" src="http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/m5iOKUwxETU5TagE57qxe6WOoX68dITeh0MkHKgR.png"></img>
<div class="default-box__item print__info default-box">
  <div class="default-box__item print__good-info default-box default-box_column">
    <div class="default-box__item print__name"></div>
    <div class="default-box__item print__spec"></div>
    <div class="default-box__item print__price"></div>
  </div>
  <div class="default-box__item print__good-code"></div>
</div>
<div class="default-box__item print__static">
  <div class="print__address">冷链仓储：柯桥柯北大道788号1A幢</div>
  <div class="print__phone">客服电话：0575-85678813</div>
</div>
</div> -->
  <div class="default-box not-print">
    <div class="side-bar">
      @foreach($categories as $category)
      @if($category->id == request('cid'))
      <a class="side-bar__item active" href="/goods_panel?cid={{$category->id}}">
      {{ $category->name }}
      </a>
      @else
      <a class="side-bar__item" href="/goods_panel?cid={{$category->id}}">
      {{ $category->name }}
      </a>
      @endif
      
      @endforeach
    </div>
    <div class="content default-box">
        @foreach($goods_arr as $goods)
        @if($goods->attributesByStatus->count()>0)
        @foreach($goods->attributesByStatus as $attribute)
        <div class="good" data-good="{{$goods->id}}" data-attr="{{$attribute->id}}" data-price="{{$attribute->price}}">
        <img class="good__img" src="{{$goods->image}}?x-oss-process=image/resize,m_fill,h_50,w_50" width="50" height="50">
        </img>
        <p class="good-name">{{ $goods->name }}</p>
        <p class="attr-name">{{ $attribute->name }}</p>
        </div> 
        @endforeach
        @else
        <div class="good" data-good="{{$goods->id}}" data-attr="" data-price="{{$goods->price}}">
        <img class="good__img" src="{{$goods->image}}?x-oss-process=image/resize,m_fill,h_50,w_50" width="50" height="50">
        </img>
        <p class="good-name">{{ $goods->name }}</p>
        <p class="attr-name">{{ $goods->title }}</p>
        </div> 
        @endif
        @endforeach
    </div>
  </div>
  @endsection

  @section('scripts')
    <script>
        $('.side-bar__item').click(function () {
          const cid = $(this).data('cid');
          window.location.assign(`/goods_panel?cid=${cid}`);
        })

        $('.good').click(function () {
          const goodName = $(this).find('.good-name').html();
          const attrName = $(this).find('.attr-name').html();
          const goodId = $(this).data('good');
          const attributeId = $(this).data('attr');
          const price = $(this).data('price');
          $('.good-tag-body__qrcode').html('')
          $('.good-tag-body__qrcode').qrcode({width: 103,height: 103,text: `goodId=${goodId}&attributeId=${attributeId}`});
          $('.good-tag-footer__name').html(goodName);
          $('.good-tag-footer__spec').html(attrName);
          // $('.print__price').html(price);
          window.print();
        })
    </script>
@endsection